<template>
<div class="main">
     <div class="part">
        <div :class="['title','thumb',activeName === 1 ? `sel`:`nosel`]" @click="change(1)">精选工厂</div>
        <div class="describe">供应商列表</div>
     </div>
     <div class="divide"></div>
     <div class="part">
        <div :class="['title','thumb',activeName === 2 ? `sel`:`nosel`]" @click="change(2)">MTM定制</div>
        <div class="describe">DIY定制产品</div>
     </div>
     <div class="divide"></div>
     <div class="part">
        <div :class="['title','thumb',activeName === 3 ? `sel`:`nosel`]" @click="change(3)">现货产品</div>
        <div class="describe">现货厂家直接对接</div>
     </div>
     <div class="divide"></div>
     <div class="part">
        <div :class="['title','thumb',activeName === 4 ? `sel`:`nosel`]" @click="change(4)">面料供应</div>
        <div class="describe">优质面料供应商</div>
     </div>
     <div class="divide"></div>
     <div class="part">
        <div :class="['title','thumb',activeName === 5 ? `sel`:`nosel`]" @click="change(5)">辅料供应</div>
        <div class="describe">优质辅料供应商</div>
     </div>
</div>
</template>
<script setup lang="ts" name="">
import {ref} from "vue";
const activeName = ref<number>(1);
const change =  (num:number) => activeName.value = num;

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
      @import "./pc.scss";
}
</style>